<template>
  <div class="joe_main">
    <div class="joe_index">
      <div class="joe_index__list" data-wow="fadeIn">
        <a-row>
          <a-col :span="6" style="border-right: 1px solid #e8e8e8">
            <div class="menu-div">
              <a-menu
                style="width: 100%;"
                mode="vertical"
              >
                <a-menu-item
                  key="1"
                  style="line-height: 60px;"
                  @click="addMyFavorites"
                >
                  <a-icon type="folder-add"/>
                  新建收藏夹
                </a-menu-item>
                <template v-for="item in myFavoritesList" v-if="myFavoritesFlag">
                  <a-divider/>
                  <a-menu-item
                    :key="item.id"
                    @click="queryMyFavorites(item)"
                  >
                    <div>
                  <span>
                    <a-icon type="folder-open" v-if="currentMenu == item.id "/>
                    <a-icon type="folder" v-else/>
                    {{ item.name }}
                  </span>
                      <span style="position: absolute;right: 10px;bottom: 0">
                    <a-icon type="file-text"/> {{ item.favoritesSum }}
                  </span>
                    </div>
                  </a-menu-item>
                </template>
                <a-divider/>
              </a-menu>
            </div>
          </a-col>

          <my-favorites-details ref="myFavoritesDetails" @deleteFavoritesOk="deleteFavoritesOk" @moveFavoritesOkRef="moveFavoritesOkRef"/>
        </a-row>
      </div>
    </div>


    <my-favorites-form ref="MyFavoritesForm" @ok="addFavoritesOk"/>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import { ellipsis } from '@/utils/util'
import MyFavoritesForm from './subTables/MyFavoritesForm'
import MyFavoritesDetails from './subTables/MyFavoritesDetails'

export default {
  name: 'MyFavorites',
  components: {
    MyFavoritesForm,
    MyFavoritesDetails
  },
  data() {
    return {
      description: '收藏夹',
      myFavoritesList: [],
      currentMenu: '',
      url: {
        myFavorites: '/articlePersonalHome/myFavorites',
        getMyFavorites: '/articleFavorites/list'
      },
      myFavoritesFlag: true
    }
  },
  created() {
    this.getMyFavorites()
  },
  methods: {
    getMyFavorites() {
      getAction(this.url.getMyFavorites, {}).then(res => {
        if (res.success) {
          if (res.result.records.length) {
            this.currentMenu = res.result.records[0].id
            this.myFavoritesList = res.result.records
            this.$refs.myFavoritesDetails.getFavoritesList(res.result.records[0])
          }
        }
      })
    },
    vHtml(html) {
      return ellipsis(html.replace(/(<([^>]+)>)/ig, ''), 150)
    },
    addMyFavorites() {
      this.$refs.MyFavoritesForm.title = '新建收藏夹'
      this.$refs.MyFavoritesForm.add()
    },
    queryMyFavorites(item) {
      this.currentMenu = item.id
      this.$refs.myFavoritesDetails.getFavoritesList(item)
    },
    addFavoritesOk() {
      this.getMyFavorites()
      this.myFavoritesFlag = false
      this.$nextTick(function() {
        this.myFavoritesFlag = true
      })
    },
    // 删除收藏夹之后更新收藏夹列表
    deleteFavoritesOk() {
      this.getMyFavorites()
    },
    // 移动至其他收藏夹之后刷新列表
    moveFavoritesOkRef() {
      getAction(this.url.getMyFavorites, {}).then(res => {
        if (res.success) {
          if (res.result.records.length) {
            this.myFavoritesList = res.result.records
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.ant-menu-item {
  height: 60px;
  //line-height: 60px;
}

a:hover {
  color: #000;
}

.ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
  border-right: none;
}
</style>
